Vue.filter('meter',function(val,unit){
	val = val || 0
	unit = unit || "m"
	return (val / 1000).toFixed(2) + unit
})

Vue.filter('currency',function(val,unit){
	val = val || 0
	unit = unit || "元"
	return val + unit
})

// 以上是vue 过滤器的用法

Vue.directive('pin',function(el,binding){
	var pinned = binding.value
	var position = binding.modifiers
	var warning = binding.arg;

	if (pinned) {
		el.style.position = 'fixed'

		for ( var key in position ){
			if(position[key]) {
				el.style[key] = '10px'
			}
		}

		if( warning == 'true'){
			el.style.background = 'yellow'
		}

	} else {
		el.style.position = 'static'
	}
})

// 以上是vue 自定义指令 和 自定义指令传参  的用法

var base = {
	methods: {
		show: function() {
			this.visible = true
		},
		hide: function() {
			this.visible = false
		},
		toggle:function(){
			this.visible = !this.visible
		}
	},
	data: function(){
		return {
			visible:false,
		}
	}	
}

Vue.component('tooltip',{
	template:`
		<div>
			<span @mouseenter="show" @mouseleave="hide">bys</span>
			<div  v-if="visible">白岩松</div>
		</div>
	`,
	mixins:[base],   // vue 中的 mixins的用法，合并组件中的相同代码
	data: function(){
		return{
			visible:true
		}
	}
})

Vue.component('popup',{
	template:`
		<div>
			<button @click="toggle">Popup</button>
			<div v-if="visible">
				<span @click="toggle">X</span>
				<h4>title</h4>
				nginx [engine x] is an HTTP and reverse proxy server, a mail proxy server, and a generic TCP/UDP proxy server
			</div>
		</div>
	`,
	mixins:[base]

})

new Vue({
	el:'#app',
	data:{
		price:10,
		length:10,
	}
})

new Vue({
	el:'#app2',
	data:{
		card1:{
			pinned: false,
		},
		card2: {
			pinned: false,
		}
	}
})